<template>
  拖拽表单组件验证
  <!-- <div style="padding: 10px; height:100%"> -->
  <div style="height: 100%">
    <ng-form-design ref="formDesign" :template="template">
      <!-- <template #formName>
        <el-input v-model="formName" />
      </template> -->
      <template #logo
        ><el-icon :size="30"><Document /></el-icon
      ></template>
      <template #controlButton>
        <el-popover placement="bottom-start" title="示例" width="240px" trigger="hover">
          <div>
            <el-row :gutter="20">
              <el-col :span="11" v-for="item in examples" :key="item.name" class="example-col">
                <span class="example-span" @click="initDemo(item)">{{ item.name }}</span>
              </el-col>
            </el-row>
          </div>
          <template #reference>
            <el-button style="margin: 0 10px" icon="Document" text size="small"> 示例 </el-button>
          </template>
        </el-popover>

        <el-select
          v-model="i18n"
          style="width: 100px"
          placeholder="语言"
          size="small"
          @change="changeI18n"
        >
          <el-option
            v-for="item in i18nList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </ng-form-design>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// console.log("nghttpConfig", window.nghttpConfig)

const formDesign = ref<{
  initModel: (param: any) => any
  useLocale: (v: string) => void
} | null>(null)

const template = ref(
  {
    list: [
      {
        type: 'select',
        label: '分类',
        index: 'D',
        options: {
          width: '100%',
          multiple: false,
          disabled: false,
          clearable: false,
          hidden: false,
          placeholder: '请选择',
          valueKey: 'value',
          tooptip: '',
          dynamic: 1,
          remoteFunc: 'https://www.netopt.net/netopt-admin/doc/api/selectCategory',
          dataPath: 'data',
          remoteValue: 'id',
          remoteLabel: 'name',
          linkage: false,
          options: [
            {
              value: '1',
              label: '下拉框1',
            },
          ],
          showSearch: false,
          dynamicHide: false,
          dynamicHideValue: '',
        },
        model: 'categorys',
        key: 'select_1620375951136',
        rules: [
          {
            required: false,
            message: '必填项',
            trigger: ['change', 'blur'],
          },
        ],
      },
      {
        type: 'select',
        label: '文章',
        index: 'D',
        options: {
          width: '100%',
          multiple: false,
          disabled: false,
          clearable: false,
          hidden: false,
          placeholder: '请选择',
          valueKey: 'value',
          tooptip: '',
          dynamic: 1,
          remoteFunc: 'https://www.netopt.net/netopt-admin/doc/api/listPage',
          dataPath: 'data.list',
          remoteValue: 'id',
          remoteLabel: 'name',
          linkage: true,
          options: [
            {
              value: '1',
              label: '下拉框1',
            },
          ],
          showSearch: false,
          dynamicHide: false,
          dynamicHideValue: '',
          linkData: [
            {
              vtype: 2,
              model: 'categorys',
              script: '',
              queryKey: 'categoryId',
              queryValue: '$.categorys',
            },
          ],
          methodType: 'get',
        },
        model: 'docs',
        key: 'select_1620375952166',
        rules: [
          {
            required: false,
            message: '必填项',
            trigger: ['change', 'blur'],
          },
        ],
        labelWidth: -1,
        width: '100%',
        span: 24,
      },
      {
        type: 'radio',
        options: {
          placeholder: '请输入',
          dynamic: 1,
          options: [
            {
              value: '1',
              label: '选项1',
            },
            {
              value: '2',
              label: '选项2',
            },
          ],
          methodType: 'get',
          remoteFunc:
            'https://mock.presstime.cn/mock/6772334e7856fb05b022b7fd/dynamicForm/getRadioData#!method=get',
          dataPath: 'data',
          remoteValue: 'value',
          remoteLabel: 'label',
          hidden: false,
          disabled: false,
          linkage: false,
          linkData: [],
        },
        label: '单选框',
        labelWidth: -1,
        width: '100%',
        span: 24,
        model: 'radio_17355371096812',
        key: 'radio_17355371096812',
        rules: [
          {
            required: false,
            message: '必填项',
            trigger: ['blur'],
          },
        ],
      },
    ],
    config: {
      labelPosition: 'left',
      labelWidth: 100,
      size: 'small',
      outputHidden: true,
      hideRequiredMark: true,
      customStyle: '',
    },
  },
  // {
  //   list: [],
  //   config: {
  //     labelPosition: "left",
  //     labelWidth: 100,
  //     size: "small",
  //     outputHidden: true, //  是否输出隐藏字段的值 默认打开,所有字段都输出
  //     hideRequiredMark: false,
  //     syncLabelRequired: false,
  //     customStyle: "",
  //   },
  // }
)

const formName = ref('')
const examples = ref([
  { name: '基础示例', path: 'basic.json' },
  { name: 'select远程联动', path: 'select远程联动.json' },
  { name: '动态表格', path: 'tablebatch.json' },
  { name: '效验', path: 'validator1.json' },
  { name: '组件联动', path: '组件联动.json' },
  { name: '焦点事件', path: '组件获取焦点事件.json' },
])

const formConfig = ref({
  httpConfig: (config: { headers: { [name: string]: string } }) => {
    config.headers['aaaa'] = 'bbbb'
    return config
  },
  // 新增数据字典配置
  dict: [
    { type: 'sex', label: '男', value: '1' },
    { type: 'sex', label: '女', value: '2' },
    { type: 'yes_or_no', label: '是', value: '1' },
    { type: 'yes_or_no', label: '否', value: '2' },
    { type: 'nation', label: '汉族', value: '1' },
    { type: 'nation', label: '蒙古族', value: '2' },
    { type: 'nation', label: '藏族', value: '3' },
    { type: 'nation', label: '壮族', value: '4' },
  ],
})

const initDemo = (row: { path: any }) => {
  const path = row.path

  const files = import.meta.glob('./data/*.json', { eager: true })
  // console.log('files', files)

  // console.log('files', files)

  // for(let key in files) {
  // 	const config = files[key].default;
  //   	list = list.concat(config)
  // }

  //const files = require.context('./data', true, /\.json$/)

  let formTemplate = undefined
  for (const key in files) {
    if (key.indexOf(path) >= 0) {
      formTemplate = (files[key] as any).default
      break
    }
  }
  if (formTemplate) {
    formDesign.value!.initModel(formTemplate)

    template.value = formTemplate
  }
}

const i18n = ref('zh_cn')
const i18nList = ref([
  { label: '中文简体', value: 'zh_cn' },
  { label: 'English', value: 'en' },
])

const changeI18n = (v: string) => {
  formDesign.value!.useLocale(v)
}
</script>
<style>
</style>
